<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./css/bootstarp.min.css"> -->
  <link rel="stylesheet" href="./test/css/button.css">
  <!-- <link rel="stylesheet" href="./test/css/text.css"> -->

</head>
<body>
  


  <!-- <div class="loading">
    <svg viewbox='0 0 50 50'>
        <circle r='25' cx='25' cy='25'></circle>
    </svg>
    <p>LOADING</p>
</div> -->
<p onclick="loading.in('./2.html')" class="title">
  <a href="./home.html">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    Link Start
  </a>
</p>

<script src="./js/vue.js"></script>

</body>
<script>
  const loading = {
      container: document.querySelector(".loading"),
      in(target) {
          this.container.classList.remove("loading_out");
          setTimeout(() => {
              window.location.href = target;
          }, 1000)
      },
      out() {
          this.container.classList.add("loading_out");
      }
  };
  window.addEventListener("load", () => {
      loading.out();
  })
</script>
</html>